<template>
  <div class="user" :style="{paddingLeft: width + 'px'}" >
    <!-- top nav bar -->
    <div class="top-bar">
      <NavTop :post="navData" v-on:sendToggleInfo="getToggleLeft" />
    </div>
    <!-- left userInfo -->
    <div class="left-bar">
      <UserInfo :width="width" />
    </div>
    <!-- workspace area -->
    <div class="workspace">
      <!-- <TaskList /> -->
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>


<script>
import UserInfo from "@/components/UserInfo";
import NavTop from "@/components/NavTop";

export default {
  name: "user",
  data() {
    return {
      navData: {
        counts: 2,
        info: [
          { text: "任务列表", link: "tasklist" },
          { text: "成员管理", link: "userlist" }
        ] 
      },
      showLeftBar: true,
    };
  },
  computed: {
    width () {
      return (this.showLeftBar)?(240):(0)
    }
  },
  components: {
    UserInfo,
    NavTop
  },
  methods: {
    getToggleLeft(val) {
      console.log('getToggleLeft', val);
      this.showLeftBar = val;
    }
  },
};
</script>

<style lang="scss" scoped>
.user {
  padding-top: 56px;
  min-width: 1366px;
}
.top-bar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9;
}
.workspace {
  width: 100%;
}
</style>

